<!--三级页面的筛选-->
<template>
  <div class="screen">
    <div class="nav-box">
      <!-- 品牌开始 -->
      <template>
        <h4 style="color:#aaa;margin-top:10px;">品牌：</h4>
        <nav v-if="newnav.length">
          <el-button
            v-for="item in newnav"
            ref="item.code"
            :key="item.code"
            type="info"
            plain
            size="mini"
            @click="select(item.code)"
            :class="active == item.code ? 'active' : '' "
          >{{ item.brand_title }}</el-button>
          <el-button
            @click="clearBrand"
            size="mini"
            type="info"
            style="margin-left:100px;"
            class="clear"
          >清除品牌信息</el-button>
        </nav>
        <nav v-else class="noda">暂无相关品牌......</nav>
      </template>
      <!-- 品牌结束 -->
    </div>
    <!-- 高级选项开始 -->
    <h4 style="color:#aaa;margin-top:10px;" class="senior">
      <span>高级选项：</span>
    </h4>
    <div class="advancedOptions">
      <ul v-if="newlists.length">
        <!-- <el-popover
          v-for="(item,index) in newlists" 
          :key="index"
          placement="bottom-start"
          :title="item.name"
          width="800"
          trigger="hover"
          >
          <el-checkbox-group
              type="info"
              v-model="item.checkList"
              @change="changesCheckList($event, item.name)"
              id="my-el-checkbox-group"
            >
              <template v-for="list in item.sku">
                <el-checkbox :key="list.code" :label="list.name"></el-checkbox>
              </template>
          </el-checkbox-group>
          <el-tag slot="reference" size="mini" style="margin: 5px; cursor: pointer;">{{item.name}}</el-tag>
        </el-popover>-->

        <!-- 自己做的 认为比较合理的 -->
        <li
          v-for="(item,index) in newlists"
          :key="index"
          @mouseenter="handleEnter(index)"
          @mouseleave="handleLeave(index)"
          :class="{'opActive': checkLists.find( n => n.name == item.name )}"
        >
          <span>{{item.name}}</span>
          <i class="el-icon-arrow-down"></i>
          <div v-if="opshow[index]" class="showoptipn">
            <el-checkbox-group
              type="info"
              v-model="item.checkList"
              @change="changesCheckList($event, item.name)"
              id="my-el-checkbox-group"
            >
              <template v-for="list in item.sku">
                <el-checkbox :key="list.code" :label="list.name"></el-checkbox>
              </template>
            </el-checkbox-group>
          </div>        
        </li>

        <!-- <li
          v-for="(item,index) in newlists"
          :key="index"
          @mouseenter="handleEnter(index)"
          @mouseleave="handleLeave(index)"
          class="specBox"
          :class="{'opActive': checkLists.find( n => n.name == item.name )}"
        >
          <span>{{item.name}}</span>
          <div class="showoptipn">
            <el-checkbox-group
              type="info"
              v-model="item.checkList"
              @change="changesCheckList($event, item.name)"
              id="my-el-checkbox-group"
            >
              <template v-for="list in item.sku">
                <el-checkbox :key="list.code" :label="list.name"></el-checkbox>
              </template>
            </el-checkbox-group>
            <div class="more">
              更多
              <i class="el-icon-arrow-down"></i>
            </div>
          </div>
        </li> -->

        <el-button @click="clearAll" size="mini" type="info" style="margin-left:100px;">清除高级选项</el-button>
      </ul>
      <nav v-else class="noda">暂无相关规格......</nav>
    </div>
    <!-- 高级选项结束 -->
  </div>
</template>
<script>
export default {
  name: "listScreen",
  props: [
    "nav",
    "loading",
    "handleNodeClickId",
    "pagechange",
    "initBrandChecked"
  ],

  data() {
    return {
      activeLists: [], // 品牌规格的active的存储
      opshow: [],
      myLists: [],
      active: null,
      checkLists: [],
      moreStyle: false
    };
  },

  computed: {
    newnav() {
      return this.nav;
    },

    newlists() {
      return this.$store.state.selectList;
    }
  },

  watch: {
    pagechange: {
      handler(newName, oldName) {
        let page = this.pagechange;
        this.BrandModel(page);
      },
      immediate: true
    },
    // 左侧导航点击事件
    initBrandChecked(newName, oldName) {
      this.moreStyle = false; // 页面转化后 初始化更多的状态
      this.active = null; // 清除品牌信息
      console.log("左侧树点击触发了事件");
      this.checkLists = [];
      // 分页初始化处理
    }
  },

  methods: {
    // 鼠标进入高级选项
    handleEnter(index) {
      this.$set(this.opshow, index, true);
    },

    // 鼠标离开高级选项
    handleLeave(index) {
      this.$set(this.opshow, index, false);
    },

    // 清除所有规格的选项
    clearAll() {
      this.$emit("pageinit");
      this.newlists.forEach(ele => {
        Object.assign((ele.checkList = []), []); // 表现形式变成清除的状态
      });
      this.checkLists = [];
      this.BrandModel();
    },

    // 品牌型号的 数据请求
    async BrandModel(page = 1) {
      this.$store.commit("listLoading", true);
      // let status_code = this.statusActive   //  后来加的   状态的存储
      let brand_code = this.active; // 品牌编码
      let param = this.checkLists;
      let id = this.$store.state.ListTreeId;
      let result = null;
      if (!param.length && !brand_code /*&& !status_code*/) {
        console.log("没有任何选择");
        result = await this.$http({
          method: "post",
          url: "/api/index/api/GoodsByBrandAndSpec",
          data: {
            page,
            id
          }
        });
      } else {
        result = await this.$http({
          method: "post",
          url: "/api/index/api/GoodsByBrandAndSpec",
          data: {
            id,
            page,
            brand_code,
            param
            // status_code
          }
        });
      }
      let data = result.data;
      if (data.State.Code == 200) {
        this.$store.commit("productListfloor", data);
        this.$store.commit("listLoading", false);
      } else if (data.State.Code == 2005) {
        this.$store.commit("productListfloor", []);
        this.$store.commit("listLoading", false);
      }
    },

    // 品牌筛选的事件
    select(key) {
      this.$emit("pageinit");
      this.active = key;
      this.BrandModel();
    },

    // 复选框发生变化
    changesCheckList(op, name) {
      let goods_spec = op;
      let tempArr = { goods_spec, name };
      console.log(tempArr);
      if (this.checkLists) {
        // 数组不为空
        // 此处循环有些问题 需要看看适合哪种循环...............................................................
        let flag = this.checkLists.findIndex(function(value, index, arr) {
          console.log(value, index, arr);
          return value["name"] == name;
        });

        if (flag == -1) {
          //新增加的组中操作
          this.checkLists.push(tempArr);
        } else {
          // 相同说明在同一个组操作 flag为数组下标
          if (op.length) {
            // 说明此组中 check不为0
            this.checkLists.splice(flag, 1, tempArr);
          } else {
            // check为0的情况下 只删除不添加
            this.checkLists.splice(flag, 1);
          }
        }
      } else {
        // 数组为空
        this.checkLists.push(tempArr);
      }
      console.log(this.checkLists);
      this.$emit("pageinit");
      this.BrandModel();
    },

    // 清除品牌选项
    clearBrand() {
      this.$emit("pageinit");
      this.active = null;
      this.BrandModel();
    },

    // 初始化一个数组用来存放这个规格的类的active的状态
    initSpcActive() {
      let opshow = [];
      for (let index = 0; index < this.$store.state.lists.length; index++) {
        opshow[index] = false;
        console.log(opshow);
      }
      this.opshow = opshow;
    }
  },

  mounted() {
    this.initSpcActive();
  }
};
</script>
<style lang="scss" scoped>
.screen {
  .nav-box {
    min-height: 40px;
    nav {
      box-sizing: border-box;
      position: relative;
      width: 100%;
      padding: 3px 1px;
      padding-right: 120px;
      .el-button {
        margin: 5px;
      }
      .active {
        background: #909399;
        border: 1px solid #909399;
        color: #fff;
      }
      .clear {
        position: absolute;
        bottom: 3px;
        right: 0px;
      }
    }
    .noda {
      text-align: center;
      letter-spacing: 0.5px;
      text-indent: 1em;
      color: rgb(204, 204, 204);
      line-height: 38px;
    }
  }
  .senior {
    display: flex;
    flex-direction: row;
    .el-button {
      margin-left: 100px;
    }
  }



  // .advancedOptions {
  //   box-sizing: border-box;
  //   padding: 3px;
  //   padding-right: 120px;
  //   width: 100%;
  //   position: relative;
  //   ul {
  //     width: 100%;
  //     display: flex;
  //     flex-direction: column;
  //     flex-wrap: wrap;
  //     color: hsl(220, 4%, 58%);
  //     > li {
  //       position: relative;
  //       width: 940px;
  //       font-size: 12px;
  //       margin: 4px 7px;
  //       border: #d3d4d6 1px solid;
  //       cursor: pointer;
  //       display: flex;
  //       flex-direction: row;
  //       height: 40px;
  //       span {
  //         width: 80px;
  //         background-color: #eeeeee;
  //         line-height: 40px;
  //         color: #333;
  //         padding-left: 8px; 
  //       }
  //       .showoptipn {
  //         width: 851px;
  //         height: 40px;
  //         overflow: hidden;
  //         box-sizing: border-box;
  //         background-color: #fff;
  //         border: 1px solid rgb(223, 222, 222);
  //         display: flex;
  //         flex-direction: row;
  //         flex-wrap: wrap;
  //         align-items: center;
  //         /deep/ .el-checkbox-group {
  //           display: flex;
  //           flex-direction: row;
  //           flex-wrap: wrap;
  //           .el-checkbox {
  //             font-size: 12px;
  //             margin: 5px 10px;
  //             .el-checkbox__label {
  //               font-size: 12px;
  //             }
  //             .el-checkbox__input + .el-checkbox__label {
  //               &:hover {
  //                 color: #909399a9;
  //               }
  //             }
  //             // checked时背景颜色
  //             .el-checkbox__input.is-checked {
  //               .el-checkbox__inner {
  //                 background-color: #909399;
  //                 border-color: #909399;
  //               }
  //             }
  //             // 后面文字的checked的颜色
  //             .el-checkbox__input.is-checked + .el-checkbox__label {
  //               color: #909399;
  //             }
  //           }
  //         }
  //         .more{
  //           padding-left: 5px;
  //           position: absolute;
  //           right: 10px;
  //           color: #aaa;
  //           border: 1px solid #ccc;
  //           width: 50px;
  //           height: 20px;
  //           line-height: 20px;
  //           &:hover{
  //             &
  //             .showoptipn{
  //               height: 80px;
  //             }
  //           }
  //         }
  //       }
  //       &:hover {
  //         background-color: #909399;
  //         border: 1px solid #909399;
  //         color: #fff;
  //         .el-icon-arrow-down {
  //           transition: ease-in-out 0.3s;
  //           transform: rotate(180deg);
  //         }
  //       }
  //     }
  //     .opActive {
  //       background-color: #909399;
  //       border: 1px solid #909399;
  //       color: #fff;
  //     }
  //   }
  //   .el-button {
  //     position: absolute;
  //     right: 5px;
  //     top: 4px;
  //   }
  // }



  // 自己做的部分 之后取消注释就好  别忘记上面的 清除高级选项
  .advancedOptions {
    box-sizing: border-box;
    padding: 3px;
    padding-right: 120px;
    width: 100%;
    position: relative;
    ul {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      color: #909399;
      > li {
        position: relative;
        font-size: 12px;
        line-height: 18px;
        padding: 2px 10px;
        margin: 4px 7px;
        border: #d3d4d6 1px solid;
        cursor: pointer;
        .showoptipn {
          max-height: 400px;
          overflow: auto;
          min-width: calc(100% + 2px);
          box-sizing: border-box;
          position: absolute;
          top: 22px;
          left: -1px;
          z-index: 9999;
          background-color: #fff;
          border: 1px solid rgb(223, 222, 222);
          display: flex;
          flex-direction: column;
          padding: 10px 5px;
          /deep/ .el-checkbox-group {
            display: flex;
            flex-direction: column;
            .el-checkbox {
              font-size: 12px;
              margin: 5px 10px;
              .el-checkbox__label {
                font-size: 12px;
              }
              .el-checkbox__input + .el-checkbox__label{
                &:hover{
                  color: #909399a9;
                }
              }
              // checked时背景颜色
              .el-checkbox__input.is-checked {
                .el-checkbox__inner {
                  background-color: #909399;
                  border-color: #909399;
                }
              }
              // 后面文字的checked的颜色
              .el-checkbox__input.is-checked + .el-checkbox__label {
                color: #909399;
              }
            }
          }
        }
        &:hover {
          background-color: #909399;
          border: 1px solid #909399;
          color: #fff;
          .el-icon-arrow-down {
            transition: ease-in-out 0.3s;
            transform: rotate(180deg);
          }
        }
      }
      .opActive {
        background-color: #909399;
        border: 1px solid #909399;
        color: #fff;
      }
    }
    .el-button {
      position: absolute;
      right: 5px;
      top: 4px;
    }
  }

  .noda {
    text-align: center;
    letter-spacing: 0.5px;
    text-indent: 1em;
    color: #ccc;
    line-height: 38px;
  }
}
</style>
